
// @ts-ignore
import {Form, FormInstance, Input, Modal} from "antd";
import React, {useEffect, useState} from "react";

// @ts-ignore
function ChangePasswordForm({onFormInstanceReady,user}){
	const [form] = Form.useForm();
	useEffect(() => {
		onFormInstanceReady(form);
	}, []);
	return (
		
		<Form layout={"horizontal"} form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} size={"small"} initialValues={user}>
			<Form.Item
				name="username"
				label="用户名"
			>
				<Input readOnly disabled={true}/>
			</Form.Item>
			<Form.Item
				name="password"
				label="密码"
				rules={[{ required: true}]}
			>
				<Input.Password />
			</Form.Item>
			<Form.Item
				name="repeatPassword"
				label="重复密码"
				dependencies={["password"]}
				rules={[{ required: true},({ getFieldValue }) => ({
					validator(_, value) {
						if (!value || getFieldValue('password') === value) {
							return Promise.resolve();
						}
						return Promise.reject(new Error('新密码不匹配!'));
					},
				})]}
			>
				<Input.Password />
			</Form.Item>
		</Form>
	)
}
// @ts-ignore
export default function ChangePasswordModal({open,onCancel,onOk,user}){
	const [formInstance, setFormInstance] = useState<FormInstance>();
	return (
		<Modal title={"修改密码"} okText={"确定"} cancelText={"取消"} okButtonProps={{ autoFocus: true }} destroyOnClose={true}
					 open={open} onCancel={onCancel} onOk={async () => {
			try {
				const values = await formInstance?.validateFields();
				formInstance?.resetFields();
				onOk(values);
			} catch (error) {
				console.log('Failed:', error);
			}
		}}>
			<ChangePasswordForm
				user={user}	// @ts-ignore
				onFormInstanceReady={(instance) => {
					setFormInstance(instance);
				}}
			/>
		</Modal>
	);
}